import { Menu, Dropdown } from 'antd';
import { ColumnHeightOutlined } from '@ant-design/icons';
import { SizeType } from "antd/es/config-provider/SizeContext";

export interface TableResizeBtnProp {
  onChange?: (v: any) => void;
  defaultKey?: SizeType
}

export default function TableResizeBtn(props: TableResizeBtnProp) {
  const onClick = (v: any) => {
    if (props.onChange) props.onChange(v.key);
  }

  const defaultKey = props.defaultKey || 'middle';

  const menu = (
    <Menu onClick={onClick} selectedKeys={[defaultKey]}>
      <Menu.Item key="large">
        <span>宽松</span>
      </Menu.Item>
      <Menu.Item key="middle">
        <span>中等</span>
      </Menu.Item>
      <Menu.Item key="small">
        <span>紧凑</span>
      </Menu.Item>
    </Menu>
  );

  return (
    <Dropdown overlay={menu} trigger={['click']}>
      <a className="ui-hover-text" onClick={e => e.preventDefault()}>
        <ColumnHeightOutlined />
      </a>
    </Dropdown>
  )
}
